<template>
	<view>
		<view class="nav2">
			<u-navbar title="申请售后" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<view class="m30">
			<view class="bgFff radius30 p30">
				<view class="flex-jus f26">
					<text class="c999">订单号：{{detail.orderCode}}</text>
					<text class="c343">{{detail.finishTime}}</text>
				</view>
				<u-gap height="10"></u-gap>
				<view class="flex flex-start">
					<u-image :src="api_host + detail.goodsInfo.icon" mode="" width="76px" height="76px"
						radius="5"></u-image>
					<view class="p10 ml10 flex1">
						<view class="c343 f28 bold">{{detail.orderPro.proName}}</view>
						<u-gap height="10"></u-gap>
						<view v-if="detail.orderType">
							<text class="f24">￥</text>
							<text class="f32">{{detail.goodsInfo.salePrice}}</text>
							<text class="f24">/份</text>
						</view>
						<view v-else>
							<view class="flex-jus f24 c999 mb10" v-for="(item,index) in detail.orderDetails"
								:key="index">
								<text>{{item.name}} x{{item.buyCount}}</text>
								<!-- <text>¥ {{item.price}}</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="10"></u-gap>
			<view v-if="detail.orderType==3" class="bgFff radius30 p30">
				<view class="flex-jus" @click="show_use = true">
					<view class="pore title-text">
						<text class="c343 f26 bold">商品是否已使用</text>
					</view>
					<view class="flex ml30">
						<text class="f26 mr20" :class="reason.dictLabel?'c343':'c999'">{{reason2.isUse||'请选择'}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#eee" margin="20rpx 0"></u-line>
				<view class="flex-jus" @click="show_cause = true">
					<view class="pore title-text">
						<text class="c343 f26 bold">退款原因</text>
					</view>
					<view class="flex ml30">
						<text class="f26 mr20"
							:class="reason.dictLabel?'c343':'c999'">{{reason2.cause||'请至少选择一项'}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#eee" margin="20rpx 0"></u-line>
				<view class="pore title-text">
					<text class="bold f26 c343">问题描述</text>
				</view>
				<u-gap height="10"></u-gap>
				<view>
					<u--textarea v-model="remark" placeholder="请描述你遇到的问题" height="200rpx" count border="surround"
						maxlength="50"></u--textarea>
				</view>
				<u-gap height="10"></u-gap>
				<view class="pore title-text">
					<text class="bold f26 c343">上传凭证</text>
					<text class="f24 c343">（最多9张）</text>
				</view>
				<u-gap height="10"></u-gap>
				<view class="">
					<u-upload :fileList="imgList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="9"></u-upload>
				</view>
			</view>
			<view v-else class="bgFff radius30 p30">
				<view class="flex-jus" @click="show_reason = true">
					<view class="pore title-text">
						<text class="c343 f26 bold">申请原因</text>
					</view>
					<view class="flex ml30">
						<text class="f26 mr20"
							:class="reason.dictLabel?'c343':'c999'">{{reason.dictLabel || '请填写申请售的原因'}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#eee" margin="20rpx 0"></u-line>
				<view class="pore title-text">
					<text class="bold f26 c343">问题描述</text>
				</view>
				<u-gap height="10"></u-gap>
				<view>
					<u--textarea v-model="remark" placeholder="请描述你遇到的问题" height="200rpx" count border="surround"
						maxlength="50"></u--textarea>
				</view>
				<u-gap height="10"></u-gap>
				<view class="pore title-text">
					<text class="bold f26 c343">上传凭证</text>
					<text class="f24 c343">（最多9张）</text>
				</view>
				<u-gap height="10"></u-gap>
				<view class="">
					<u-upload :fileList="imgList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="9"></u-upload>
				</view>
			</view>
			<u-gap height="30"></u-gap>
			<view v-if="detail.orderType!=3">
				<u-button color="#FFD955" :customStyle="{'color':'#34314F','height':'80rpx'}" shape="circle"
					@click="submitApply">提交至客服</u-button>
			</view>
			<u-gap height="20"></u-gap>
		</view>
		<view v-if="detail.orderType==3" class="boxfixed fix-bot">
			<view class="f24">
				<text>退款金额</text>
				<text class="cff7 ml10">￥</text>
				<text class="cff7 f54">{{price}}</text>
			</view>
			<view class="subBtn flex-cen" @click="submitApply2">提交</view>
		</view>
		<!-- //申请原因 -->
		<u-popup :show="show_reason" @close="show_reason = false" mode="center" @open="show_reason = true" closeable
			round="20" :customStyle="{'width':'80%'}">
			<view class="p30">
				<view class="c343 bold">申请原因</view>
				<u-gap height="20"></u-gap>
				<view class="">
					<u-radio-group v-model="modal_reasonIndex" placement="column">
						<u-radio :customStyle="{margin: '8px 0'}" labelSize="14" activeColor="#FFDE6D"
							v-for="(item, index) in reasonList" :key="index" :label="item.dictLabel" :name="index">
						</u-radio>
					</u-radio-group>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx','width':'40%'}"
						shape="circle" @click="reasonConfirm">确定</u-button>
				</view>
			</view>
		</u-popup>
		<!-- //商品是否使用 -->
		<u-popup :show="show_use" @close="show_use = false" @open="show_use = true" closeable round="20">
			<view class="p30">
				<view class="c343 bold">商品是否使用</view>
				<u-gap height="20"></u-gap>
				<view class="">
					<u-radio-group v-model="shopUse" iconPlacement="right" placement='column'>
						<u-radio :customStyle="{margin: '8px 0'}" v-for="(item,index) in radiolist1" :key="index"
							:label="item.name" :name="item.value" :value="item.value" activeColor="#FFDE6D"
							@change="radioChange(item)"></u-radio>
					</u-radio-group>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
						@click="reason2Confirm">确定</u-button>
				</view>
			</view>
		</u-popup>
		<!-- //退款原因 团购 -->
		<u-popup :show="show_cause" @close="show_cause = false" @open="show_cause = true" closeable round="20">
			<view class="p30">
				<view class="c343 bold">退款原因</view>
				<u-gap height="20"></u-gap>
				<view v-if="shopUse==0">商品已使用</view>
				<view v-if="shopUse==1">商品未使用</view>
				<u-gap height="20"></u-gap>
				<view class="" v-if="shopUse==0">
					<u-radio-group v-model="cause" iconPlacement="right" placement='column'>
						<u-radio :customStyle="{margin: '8px 0'}" v-for="(item,index) in radiolist_use" :key="index"
							:label="item.dictLabel" :name="index" activeColor="#FFDE6D"
							@change="radioChangecause(item)"></u-radio>
					</u-radio-group>
				</view>
				<view class="" v-if="shopUse==1">
					<u-radio-group v-model="cause" iconPlacement="right" placement='column'>
						<u-radio :customStyle="{margin: '8px 0'}" v-for="(item,index) in radiolist_nouse" :key="index"
							:label="item.dictLabel" :name="index" activeColor="#FFDE6D"
							@change="radioChangecause(item)"></u-radio>
					</u-radio-group>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
						@click="reason3Confirm">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-modal :show="show_action" title="提交成功" content="工作人员正在处理中!">
			<!-- <view class="flex-au" slot="confirmButton" v-if="detail.orderType==3">
				<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx','width':'50%'}" shape="circle"
					@click="toshouhou">确定</u-button>
			</view> -->
			<view class="flex-au" slot="confirmButton">
				<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx','width':'50%'}" shape="circle"
					@click="back()">确定</u-button>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import appInfo from '@/common/appInfo.js'
	import {
		getDictdata
	} from '@/common/api_user.js'
	import {
		getOrderdetail,
		createSalesorder
	} from '@/common/api_order.js'
	export default {
		name: '',
		data() {
			return {
				detail: {},
				reasonList: [],
				remark: '',
				reason: {},
				reason2: {
					isUse: '',
					cause: ''
				},
				radiolist1: [{
						name: '已使用',
						disabled: false,
						value: '0'
					},
					{
						name: '未使用',
						disabled: false,
						value: '1'
					},
				],
				radiolist_use: [],
				radiolist_nouse: [],
				reasonList2: [],
				imgList: [],
				modal_reasonIndex: 0,
				shopUse: '0', //是否使用
				cause: "0", //退款原因
				show_reason: false,
				show_action: false,
				show_use: false,
				show_cause: false,
				price: '',
				saleId: '', //核销id
				useStatus: '', //使用状态
				problem: ''
			}
		},
		onLoad(option) {
			this.getDictdata()
			this.id = option.id
			this.price = option.price
			this.saleId = option.child_id
			console.log(option);
			this.getOrderdetail()
			this.getDictdataUse()
			this.getDictdataNouse()
		},
		methods: {
			toshouhou() {
				uni.navigateTo({
					url: '/subpage/service/index'
				})
			},
			back() {
				uni.navigateBack()
			},
			async getDictdataUse() { //获取已使用退款原因
				const res = await getDictdata({
					dictType: 'radiolist_use'
				})
				if (res.code == 200) {
					this.radiolist_use = res.data
				}
			},
			async getDictdataNouse() { //获取未使用退款原因
				const res = await getDictdata({
					dictType: 'radiolist_nouse'
				})
				if (res.code == 200) {
					this.radiolist_nouse = res.data
				}
			},
			async getDictdata() { //下单备注
				const res = await getDictdata({
					dictType: 'sys_sales_reason'
				})
				if (res.code == 200) {
					this.reasonList = res.data
				}
			},
			// groupChange(val) {
			// 	console.log(val);
			// },
			radioChange(val) {
				console.log(val);
				// this.reason2.isUse = val.name
			},
			radioChangecause(val) {
				console.log(val);
				// this.reason2.cause = val.name
			},
			reason3Confirm() {
				if (this.shopUse == 0) { //已使用
					this.reason2.cause = this.radiolist_use[this.cause].dictLabel
					this.problem = this.reason2.cause
				} else {
					this.reason2.cause = this.radiolist_nouse[this.cause].dictLabel
					this.problem = this.reason2.cause
				}
				this.show_cause = false
			},
			reason2Confirm() {
				// console.log(this.radiolist1[this.shopUse]);
				this.reason2.isUse = this.radiolist1[this.shopUse].name
				this.useStatus = this.radiolist1[this.shopUse].value
				this.show_use = false
			},
			reasonConfirm() {
				this.reason = this.reasonList[this.modal_reasonIndex]
				this.show_reason = false
			},
			// 删除图片
			deletePic(event) {
				this.imgList.splice(event.index, 1)
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.imgList.length
				lists.map((item) => {
					this.imgList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$utils.uploadFile(lists[i].url)
					if (result.code == 200) {
						let item = this.imgList[fileListLen]
						this.imgList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: this.api_host + result.full_url,
							api_url: result.full_url
						}))
						fileListLen++
					}
				}
			},
			async getOrderdetail() {
				uni.showLoading({
					mask: true
				})
				const res = await getOrderdetail({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
				}
				uni.hideLoading()
			},
			async submitApply() {
				if (!this.reason.dictLabel) {
					uni.showToast({
						title: '请选择原因',
						icon: 'none'
					})
					return false
				}
				if (!this.remark) {
					uni.showToast({
						title: '请填写问题',
						icon: 'none'
					})
					return false
				}
				if (this.imgList.length == 0) {
					uni.showToast({
						title: '请上传图片',
						icon: 'none'
					})
					return false
				}
				let imgs = []
				this.imgList.forEach(item => {
					imgs.push(item.api_url)
				})
				let data = {
					id: this.id,
					description: this.remark,
					images: imgs.join(','),
					problem: this.reason.dictLabel
				}
				// #ifdef MP-WEIXIN
				let messageRes = await this.$utils.messageSubscriptionAuthorization(appInfo.tmplIds.afterOrder);
				// #endif
				uni.showLoading({
					mask: true
				})
				const res = await createSalesorder(data)
				if (res.code == 200) {
					this.show_action = true
				}
				uni.hideLoading()
			},
			async submitApply2() {
				// if (!this.reason.dictLabel) {
				// 	uni.showToast({
				// 		title: '请选择原因',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				if (!this.remark) {
					uni.showToast({
						title: '请填写问题',
						icon: 'none'
					})
					return false
				}
				if (this.imgList.length == 0) {
					uni.showToast({
						title: '请上传图片',
						icon: 'none'
					})
					return false
				}
				let imgs = []
				this.imgList.forEach(item => {
					imgs.push(item.api_url)
				})
				let data = {
					id: this.id,
					saleId: this.saleId,
					description: this.remark,
					images: imgs.join(','),
					problem: this.problem,
					useStatus: this.useStatus
				}
				// #ifdef MP-WEIXIN
				let messageRes = await this.$utils.messageSubscriptionAuthorization(appInfo.tmplIds.afterOrder);
				// #endif
				uni.showLoading({
					mask: true
				})
				const res = await createSalesorder(data)
				if (res.code == 200) {
					this.show_action = true
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	.boxfixed {
		height: 165rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 38rpx 38rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.subBtn {
			width: 227rpx;
			height: 92rpx;
			background: #FFDE6D;
			border-radius: 38rpx;
			backdrop-filter: blur(25px);
		}
	}

	page {
		background-color: #FEF4E8;
	}

	.tag_item {
		padding: 10rpx 30rpx;
		border: 1px solid transparent;
	}

	.active {
		color: #FF7F1C;
		background-color: #FFFAF5;
		border-color: #FF7F1C;
	}

	.title-text {
		line-height: 28rpx;
	}

	.title-text::before {
		content: '';
		position: absolute;
		left: -30rpx;
		top: 2rpx;
		height: 13px;
		width: 2px;
		background-color: #FFDE6D;
	}
</style>